<template>
  <div class="container">
    <p ref="pDom">我的P元素</p>
    <ul>
      <li :ref="setList" v-for="i in 4" :key="i">我的LI元素{{i}}</li>
    </ul>
    {{count}} <button @click="count++">加加</button>
    <button @click="logList">打印liList</button>
  </div>
</template>
<script>
import { ref , onMounted, onBeforeUpdate} from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 获取单个元素或者单个组件
    // vue2.0 写在标签上ref="dom"，使用this.$refs.dom获取
    // vue3.0 使用ref函数的申明响应式数据返回给模版使用，给需要获取的标签上绑定这个数据
    const pDom = ref(null)
    onMounted(()=>{
      console.log(pDom.value)
    })

    // 2. 获取遍历时候的多个元素或者多个元素组件
    // vue2.0 <li ref="liList" v-for="i in 4" :key="i">我的LI元素{{i}}</li>  
    // this.$refs.liList = [dom,dom,dom,dom]

    // vue3.0 先定义一个空数组，然后定一个收集dom的函数，返回这个函数给遍历的元素使用ref绑定这个函数
    let liList = []
    const setList = el => {
      console.log(el)
      // v-for执行的时候，遍历一次执行一次
      liList.push(el)
    }
    onMounted(()=>{
      console.log(liList)
    })
    onBeforeUpdate(()=>{
      // 注意：数据更新的时候需要重置dom数组
      liList = []
    })


    const logList = () => {
      console.log(liList)
    }
    const count = ref(0)

    return { pDom , setList, count, logList}
  }
}
</script>
<style scoped lang="less"></style>
